.day-night-switch {
  display: inline-block;
  z-index: 3;
  opacity: .65;
  width: 52px;
  height: 58px;
  padding: 15px 12px 18px 12px;
}

.day-night-switch .onOff {
  background: #324164;
  width: 65px;
  height: 25px;
  z-index: 5;
  border-radius: 25px;
  box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.1);
  border: 2px solid #1e2d50;
  overflow: hidden;
  position: relative
}

.day-night-switch .onOff * {
  transition: all .4s ease
}

.day-night-switch .onOff.daySwitch {
  border: 2px solid #52a6bf
}

.day-night-switch .onOff.daySwitch .sky {
  width: 65px;
  height: 25px;
  //border-radius: 25px;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(0px, 0px);
  animation: none !important
}

.day-night-switch .onOff.daySwitch .sunMoon {
  background: #ffdf61;
  border: 2px solid #d9b31c;
  left: calc(100% - 23px)
}

.day-night-switch .onOff.daySwitch .sunMoon .crater {
  transform: scale(0) !important
}

.day-night-switch .onOff.daySwitch .sunMoon .cloud {
  opacity: 1;
  transform: translatex(0px);
  transition-delay: .2s;
  animation: cloudAnim 2.5s linear infinite
}

.day-night-switch .onOff .sunMoon {
  background: #f0e1a5;
  height: 16px;
  width: 16px;
  border-radius: 100%;
  border: 2px solid #ccc091;
  position: absolute;
  left: 3px;
  top: 2.5px
}

.day-night-switch .onOff .sunMoon .crater {
  background: #ccc091;
  width: 5px;
  height: 5px;
  border-radius: 13px;
  position: absolute;
  left: 50%;
  top: 20%
}

.day-night-switch .onOff .sunMoon .crater.crater1 {
  left: 30%;
  top: 45%;
  transform: scale(0.5)
}

.day-night-switch .onOff .sunMoon .crater.crater2 {
  left: 55%;
  top: 60%;
  transform: scale(0.7)
}

.day-night-switch .onOff .sunMoon .cloud {
  background: white;
  border-radius: 3px;
  position: absolute;
  opacity: 0;
  transform: translatex(-20px);
  transition-delay: 0s
}

.day-night-switch .onOff .sunMoon .cloud.part1 {
  width: 20px;
  height: 2px;
  left: -12px;
  top: calc(50% - 1.5px)
}

.day-night-switch .onOff .sunMoon .cloud.part1:before {
  content: "";
  background: white;
  border-radius: 3px;
  position: absolute;
  width: 3px;
  height: 3px;
  left: 40%;
  top: -100%
}

.day-night-switch .onOff .sunMoon .cloud.part1:after {
  content: "";
  background: white;
  border-radius: 3px;
  position: absolute;
  width: 15px;
  height: 2px;
  left: 20%;
  top: -200%
}

.day-night-switch .onOff .sunMoon .cloud.part2 {
  width: 3px;
  height: 3px;
  left: -1px;
  top: calc(50% + 0.3px)
}

.day-night-switch .onOff .sunMoon .cloud.part2:before {
  content: "";
  background: white;
  border-radius: 3px;
  position: absolute;
  width: 18px;
  height: 2px;
  left: -8px;
  top: 100%
}

.day-night-switch .onOff .star {
  background: #5ebedb;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(20px, 5px)
}

.day-night-switch .onOff .star.star1 {
  transform: translate(10px, 15px) scale(0.3);
  animation: starAnim1 3s -2.4s linear infinite
}

.day-night-switch .onOff .star.star2 {
  transform: translate(15px, -7px) scale(0.6);
  animation: starAnim2 3s -1.1s linear infinite
}

.day-night-switch .onOff .star.star3 {
  transform: translate(35px, -12px) scale(0.9);
  animation: starAnim3 3s -1.5s linear infinite
}

.day-night-switch .onOff .star.star4 {
  transform: translate(30px, 12px) scale(0.4);
  animation: starAnim4 3s -1.9s linear infinite
}

.day-night-switch .onOff .star.star5 {
  transform: translate(0px, 0px) scale(0.6);
  animation: starAnim5 3s -2.8s linear infinite
}

.day-night-switch .onOff .star.sky {
  animation: skyAnim 3s -.4s linear infinite
}

@keyframes starAnim1 {
  0% {
    transform: translate(5px, 30px) scale(0.3)
  }
  20% {
    transform: translate(8px, 17px) scale(0.3)
  }
  50% {
    transform: translate(10px, 0px) scale(0.3)
  }
  80% {
    transform: translate(8px, -17px) scale(0.3)
  }
  100% {
    transform: translate(5px, -30px) scale(0.3)
  }
}

@keyframes starAnim2 {
  0% {
    transform: translate(10px, 30px) scale(0.6)
  }
  20% {
    transform: translate(13px, 17px) scale(0.6)
  }
  50% {
    transform: translate(15px, 0px) scale(0.6)
  }
  80% {
    transform: translate(13px, -17px) scale(0.6)
  }
  100% {
    transform: translate(10px, -30px) scale(0.6)
  }
}

@keyframes starAnim3 {
  0% {
    transform: translate(30px, 30px) scale(0.9)
  }
  20% {
    transform: translate(33px, 17px) scale(0.9)
  }
  50% {
    transform: translate(35px, 0px) scale(0.9)
  }
  80% {
    transform: translate(33px, -17px) scale(0.9)
  }
  100% {
    transform: translate(30px, -30px) scale(0.9)
  }
}

@keyframes starAnim4 {
  0% {
    transform: translate(25px, 30px) scale(0.4)
  }
  20% {
    transform: translate(28px, 17px) scale(0.4)
  }
  50% {
    transform: translate(30px, 0px) scale(0.4)
  }
  80% {
    transform: translate(28px, -17px) scale(0.4)
  }
  100% {
    transform: translate(25px, -30px) scale(0.4)
  }
}

@keyframes starAnim5 {
  0% {
    transform: translate(0px, 30px) scale(0.6)
  }
  20% {
    transform: translate(3px, 17px) scale(0.6)
  }
  50% {
    transform: translate(5px, 0px) scale(0.6)
  }
  80% {
    transform: translate(3px, -17px) scale(0.6)
  }
  100% {
    transform: translate(0px, -30px) scale(0.6)
  }
}

@keyframes skyAnim {
  0% {
    transform: translate(15px, 30px) scale(1)
  }
  20% {
    transform: translate(18px, 17px) scale(1)
  }
  50% {
    transform: translate(20px, 0px) scale(1)
  }
  80% {
    transform: translate(18px, -17px) scale(1)
  }
  100% {
    transform: translate(15px, -30px) scale(1)
  }
}

@keyframes cloudAnim {
  0% {
    transform: translatex(0px)
  }
  14% {
    transform: translatex(5px)
  }
  56% {
    transform: translatex(-10px)
  }
  100% {
    transform: translatex(0px)
  }
}


@media only screen and (max-width: 720px) {

  //.day-night-switch .onOff, .day-night-switch .onOff.daySwitch .sky {
  //  width: 50px;
  //  height: 18px;
  //  //border-radius: 18px
  //}
  //.day-night-switch .onOff .sunMoon {
  //  height: 12px;
  //  width: 12px;
  //  top: 1px
  //}
  //.day-night-switch .onOff.daySwitch .sunMoon {
  //  left: calc(100% - 19px)
  //}
  .day-night-switch {
    //right: 12px;
    //top: 15px
    right: 40px;
  }

  //.day-night-switch .onOff .star {
  //  top: -50%
  //}
  //
  //.day-night-switch .onOff .sunMoon .crater {
  //  width: 3px;
  //  height: 3px
  //}
  //
  //.day-night-switch .onOff .sunMoon .cloud.part1 {
  //  width: 17px
  //}
  //
  //.day-night-switch .onOff .sunMoon .cloud.part1:after {
  //  width: 12px
  //}
  //
  //.day-night-switch .onOff .sunMoon .cloud.part2:before {
  //  width: 15px
  //}
}
